<!DOCTYPE html>
<html>
<head>
    <title>文字特效</title>
</head>
<body>
    <canvas id="canvas" width="480" height="300" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

<script type="text/javascript">
    function draw(){
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#0f0";
        //var fontSize = 90;
        ctx.font = "bold 90px Arial";
        ctx.fillText("立",190,90);

        ctx.globalAlpha = 0.7;
        ctx.font="bold 70px Arial";
        ctx.fillText("体",260,90);
        ctx.globalAlpha = 0.6;
        ctx.font="bold 50px Arial";
        ctx.fillText("感",310,90);
        ctx.globalAlpha = 0.5;
        ctx.font="bold 30px Arial";
        ctx.fillText("文",350,90);
        ctx.globalAlpha = 0.4;
        ctx.font="bold 20px Arial";
        ctx.fillText("字",370,90);

        ctx.globalAlpha = 0.7;
        ctx.font="bold 70px Arial";
        ctx.fillText("体",145,90);
        ctx.globalAlpha = 0.6;
        ctx.font="bold 50px Arial";
        ctx.fillText("感",110,90);
        ctx.globalAlpha = 0.5;
        ctx.font="bold 30px Arial";
        ctx.fillText("文",90,90);
        ctx.globalAlpha = 0.4;
        ctx.font="bold 20px Arial";
        ctx.fillText("字",80,90);
    }
    draw();
</script>
</body>
</html>